<template>
  <div class="bill-tag-add">
    <header class="tag-add-header">
      <div @click="backClick" class="back-button">
        返回
      </div>
      <div @click="confirmClick" class="confirm-button">
        确定
      </div>
      <div class="tag-add-title">
        <span>新建账单标签</span>
      </div>
    </header>
    <main class="tag-add-main">
      <div class="edit-box">
        <van-form label-align="right">
          <van-field
            class="tag-input"
            v-model="currentTagName"
            label-width="20vw"
            label-align="center"
            label="标签名称"
            maxlength="4"
            placeholder="标签名称"
          />
          <van-field
            label-width="20vw"
            label-align="center"
            label="标签类型" 
            class="tag-input">
            <template #input>
              <van-radio-group 
                class="tag-input-type"
                v-model="currentBillType" 
                direction="horizontal">
                <van-radio :name="getRevenueType">收入</van-radio>
                <van-radio :name="getExpenseType">支出</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            label-width="20vw"
            label-align="center"
            label="标签图标" 
            class="tag-input">
            <template #input>
              <div class="tag-input-icon" :style="`color:${currentTagColor};`">
                <van-icon :name="currentTagIcon" size="8vw"/>
              </div>
            </template>
          </van-field>
          <div class="tag-map">
            <div 
              v-for="tagIcon in getTagIconMap"
              :key="tagIcon"
              @click="toggleIcon(tagIcon)"
              class="tag-map-item">
              <div class="tag-input-icon" :style="`color:${currentTagIcon === tagIcon ? currentTagColor : '#000'};`">
                <van-icon :name="tagIcon" size="8vw"/>
              </div>
            </div>
          </div>
          <van-field
            label-width="20vw"
            label-align="center"
            label="标签颜色" 
            class="tag-input">
            <template #input>
              <div class="tag-input-color" 
                :style="`background-color:${currentTagColor};`"></div>
            </template>
          </van-field>
          <div class="color-map">
          <div 
            v-for="color in getColorMap"
            :key="color"
            @click="toggleColor(color)"
            class="color-map-item" 
            :style="`background-color:${color};`">
              <van-icon v-if="currentTagColor === color" name="success" size="8vw"/>
            </div>
          </div>
        </van-form>
      </div>
    </main>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { UserModule, IBillTag } from '../../../store/modules/user';
import { colorMap } from '../../../utils/colorMap';
import { BillType } from '../../../store/modules/bill';
import { tagMap } from '../../../utils/tagMap';
import { Toast } from 'vant';

@Component({
  name: 'BIllTagAdd',
})
export default class extends Vue {
  private currentTagIcon: string = tagMap[0].icon;
  private currentTagColor: string = colorMap[0];
  private currentTagName: string = '';
  private currentBillType: BillType = BillType.Expense;

  private get getTagIconMap(): string[] {
    return tagMap.reduce((pre: string[], cur: IBillTag) => {
      return pre.indexOf(cur.icon) === -1 ? [...pre, cur.icon] : pre;
    }, []);
  }
  private get getColorMap(): string[] {
    return colorMap;
  }
  private get getRevenueType(): BillType {
    return BillType.Revenue;
  }
  private get getExpenseType(): BillType {
    return BillType.Expense;
  }

  private toggleColor(color: string) {
    this.currentTagColor = color;
  }
  private toggleIcon(icon: string) {
    this.currentTagIcon = icon;
  }
  private backClick() {
    const router = '$router';
    this[router].push({ path: 'bill-edit' });
    UserModule.toggleIsAddBillTagStatus(false);
  }
  private confirmClick() {
    if (!this.currentTagName) {
      Toast.fail({
        message: '请输入标签名称',
        forbidClick: true,
        duration: 500,
      });
      return;
    }
    const billTag: IBillTag = {
      tagId: Math.floor(Math.random() * 100000000),
      name: this.currentTagName,
      type: this.currentBillType,
      icon: this.currentTagIcon,
      color: this.currentTagColor,
    };
    UserModule.addBillTag(billTag);
    const router = '$router';
    this[router].push({ path: 'bill-edit' });
    UserModule.toggleIsAddBillTagStatus(false);
  }
}
</script>
<style scoped>
.bill-tag-add {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.asset-header {
  position: relative;
  height: 100px;
}
.tag-add-title {
  line-height: 100px;
}
.back-button, .confirm-button {
  position: absolute;
  line-height: 100px;
  color: #409EFF;
}
.back-button {
  left: 30px;
}
.confirm-button {
  right: 30px;
}
.tag-add-main {
  height: 100%;
  width: 100%;
  border-top: 1px solid #D0CECF;
  border-bottom: 1px solid #D0CECF;
  background-color: #F7F7F7;
}
.tag-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100px;
  padding-left: 20px;
  border-radius: 10px;
  margin: 20px;
}
.tag-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 60px;
  background-color: white;
  border-radius: 50%;
}
.tag-name {
  padding-left: 20px;
  color: white;
}
.tag-input-type {
  height: 100px;
}
.tag-amount {
  position: absolute;
  right: 20px;
  color: white;
}
.tag-input {
  display: flex;
  align-items: center;
  height: 100px;
  font-size: 30px;
}
.tag-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  width: 70px;
  background-color: white;
  border-radius: 50%;
}
.tag-input-color {
  height: 50px;
  width: 50px;
  border-radius: 10px;
  margin-left: 10px;
}
.tag-map {
  border-bottom: 1px solid #EDEDF0;
  background-color: white;
  padding: 20px;
  height: 200px;
}
.tag-map-item {
  float: left;
  height: 60px;
  width: 60px;
  color: white;
  border-radius: 10px;
  margin-left: 10px;
  margin-top: 30px;
}
.color-map {
  border-bottom: 1px solid #EDEDF0;
  background-color: white;
  padding: 20px;
  height: 100px;
}
.color-map-item {
  float: left;
  height: 60px;
  width: 60px;
  color: white;
  border-radius: 10px;
  margin-left: 10px;
  margin-top: 10px;
}
</style>